<template>
  <div class="container">
    <div class="btn_wrapper">
      <span style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <el-button
        style="justify-content: flex-end"
        type="success"
        icon="el-icon-edit"
        @click="btn"
        >新增试题</el-button
      >
    </div>
    <SearchQuestion @subjectList="searchList"></SearchQuestion>

    <!-- tab标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待审核" name="0"></el-tab-pane>
      <el-tab-pane label="已审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <el-alert
      style="margin-bottom: 15px"
      :title="`数据一共 ${counts} 条`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>
    <!-- 表格区 -->
    <div>
      <el-table :data="tableData" style="width: 100%" size="small">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80" align="center">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="80" align="center">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="80"
          align="center"
        >
          <template slot-scope="{ row }">
            <div>{{ questionType[row.questionType - 1].label }}</div>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280" align="center">
          <template slot-scope="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180"
          align="center"
        >
          <template slot-scope="{ row }">{{
            row.addDate | formatDate
          }}</template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="80"
          align="center"
        >
          <template slot-scope="{ row }">
            <div>{{ difficulty[row.difficulty - 1].label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="80"
          align="center"
        >
          <template slot-scope="{ row }">
            <div>{{ chkType[row.chkState].label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="80"
          align="center"
        >
          <template slot-scope="{ row }">
            <div>{{ publishType[row.publishState].label }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="240" fixed="right" align="center">
          <template slot-scope="{ row }">
            <div>
              <el-button type="text" @click="Preview(row.id)" size="mini"
                >预览</el-button
              >
              <el-button
                type="text"
                :class="{ disabled: row.chkState !== 0 }"
                :disabled="row.chkState !== 0"
                size="mini"
                @click="checkQuestion(row)"
                >审核</el-button
              >
              <el-button
                type="text"
                @click="Editquestion(row)"
                size="mini"
                :class="{ disabled: row.publishState === 1 }"
                :disabled="row.publishState === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="choiceAdd(row, $event)"
                size="mini"
                >{{ row.publishState === 1 ? "下架" : "上架" }}</el-button
              >
              <el-button type="text" @click="delQuestions(row.id)" size="mini">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="text-align: right; margin-top: 20px; margin-bottom: 15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="data.page"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="data.pagesize"
      layout="prev, pager, next, sizes, jumper"
      background
      :total="counts"
    >
    </el-pagination>

    <questions-preview
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      :preview="preview"
    ></questions-preview>
    <questions-check
      :dialogVisible="checkDialogVisible"
      @close="checkDialogVisible = false"
      :preview="preview"
    ></questions-check>
  </div>
</template>

<script>
import {
  difficulty,
  questionType,
  publishType,
  chkType,
} from "../../api/hmmm/constants";
// import { Subjects } from "../../api/hmmm/questions";
// 组件
import SearchQuestion from "../components/search-question.vue";
import QuestionsCheck from "../components/questions-check";
import QuestionsPreview from "../components/questions-preview.vue";
import {
  getQuestions,
  preview,
  delQuestions,
  choicePublish,
} from "../../api/hmmm/questions";

export default {
  name: "choice",
  data() {
    return {
      activeName: "all",
      difficulty,
      questionType,
      chkType,
      publishType,
      dialogVisible: false,
      checkDialogVisible: false,
      preview: {},
      tableData: [],
      data: {
        page: 1,
        pagesize: 5,
      },
      counts: 0,
    };
  },
  components: {
    QuestionsPreview,
    QuestionsCheck,
    SearchQuestion,
  },
  created() {
    this.getquestionList();
  },
  methods: {
    async searchList(ruleForm) {
      const res = await getQuestions(ruleForm);
      this.counts = res.data.items.length;
      this.tableData = res.data.items;
    },
    handleClick() {
      switch (this.activeName) {
        case "all":
          this.data.chkState = null;
          this.getquestionList();
          break;
        case "0":
          this.data.chkState = 0;
          this.getquestionList();
          break;
        case "1":
          this.data.chkState = 1;
          this.getquestionList();
          break;
        case "2":
          this.data.chkState = 2;
          this.getquestionList();
          break;
      }
    },

    btn() {
      this.$router.push({ name: "questions-new" });
    },
    // 获取列表
    async getquestionList() {
      let data = this.data;
      const res = await getQuestions(data);
      this.counts = res.data.counts;
      this.tableData = res.data.items;
    },
    // 题库删除
    async delQuestions(id) {
      try {
        await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await delQuestions(id);
        this.getquestionList();
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
      }
    },

    // 上下架
    async choiceAdd(item, e) {
      const result = await this.$confirm(
        "您确认" + e.target.innerText + "这道题目吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }
      ).catch((err) => err);

      let data = {};

      if (result === "confirm") {
        switch (e.target.innerText) {
          case "上架":
            data = await choicePublish({
              id: item.id,
              publishState: 1,
            });
            break;

          case "下架":
            data = await choicePublish({
              id: item.id,
              publishState: 0,
            });
            break;
        }

        if (data.status === 200) {
          this.$message.success(e.target.innerText + "成功");
        }

        this.getquestionList();
      }
    },
    // 修改
    Editquestion(row) {
      localStorage.setItem("questID", row.id);
      this.$router.push({
        path: "new",
        query: {
          id: row.id,
        },
         
      });
      
    },
    // 审核
    checkQuestion(item) {
      this.preview = item;
      this.checkDialogVisible = true;
    },

    // 预览
    async Preview(id) {
      try {
        const { data } = await preview(id);
        this.preview = data;
        this.dialogVisible = true;
      } catch (error) {
        return false;
      }
    },
    dialogVisiblea(tof) {
      this.dialogVisible = tof;
    },
    handleCurrentChange(val) {
      this.data.page = val;
      this.getquestionList();
    },
    handleSizeChange(val) {
      this.data.pagesize = val;
      this.getquestionList();
    },
  },
};
</script>

<style>
.container {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
}
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
